Fox 2.0 Router 视图-整体更新

整体更新（不推荐）

fox router兼容vue router的整体替换策略，也就是在route table中构建完整的页面结构，整体替换fox-router-view下面的内容

例子

例子代码：sites/example/pages/program-navigate-all

例子说明：在index.ts的路由表中构造了父子结构，通过个router的to方法，把完整的页面结构嵌入到name=default的fox-router-view中

API

push方法的参数类型有两种:(route)|(path, data, root)

参数A（route路由对象）

fox.router.push(route)

属性	类型	说明
path	string	路由路径
name	string	路由名称
root	string	装载组件的router-view的名称
params	Object	路由参数
success	Function	页面装载成功后调用方法
error	Function	页面装载失败后调用方法
destroy	Function	页面销毁时调用方法

参数B(参数列表):

fox.router.push(path/name, data, root)

属性	类型	说明
path	string	路由路径
name	string	路由名称
data	Object	路由参数
root	string	装载组件的router-view的名称

index.ts（路由表注册）

import panel from './components/panel.vue'
import home from './components/home.vue'
import about from './components/about.vue'

import notFound from '../not-found/index.vue'


//路由表
let routes = [
    {
        path:'/',
        redirect:'/panel/home'
    },
    {
        path:'/panel',
        component:panel,
        children:[
            {
                path:'home',
                component:home,
            },
            {
                path:'about',
                component:about,
            }
        ]
    },
]
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //设置404页面
        fox.router.setNotFoundRoute( {
            path:'/notFound',
            component: notFound,
        },)
        //加入路由
        fox.router.addRoutes(routes)
    }
} 

index.vue（路由演示）

<template>
    <div>
    <div>
      <button @click="toHome" class="my-button">go home</button>
      <button @click="toAbout" class="my-button">go about</button>
      <button @click="toOther" class="my-button">go other</button>
    </div>
    <div class="my-router-view-div">
      <fox-router-view></fox-router-view>
    </div>
  </div>
</template>
<script>
import { FoxApp } from './index.ts'

export default {
    created() {
    //获取 fox
    let fox = this.$fox;
    //安装fox app
    FoxApp.install(fox);
  },
  //方法
  methods: {
    toHome() {
      console.info("--------- navigate to home a");
      this.$router.push("/panel/home");
    },

    toAbout() {
      console.info("--------- navigate to about b");
      this.$router.push("/panel/about");
    },

    toOther() {
      console.info("--------- navigate to other c");
      this.$router.push("/panel/other");
    },
  },
}
</script>

<style>
    .fox-card-views{
        padding: 0px 0x 0px 0px;
    }

    .fox-card-view{
        position: relative;
        overflow: hidden;
    }

    .fox-card-view-trans-enter {}

    .fox-card-view-trans-enter-active {
       animation: fox-card-view-in-slide-right 330ms;
        -webkit-animation: fox-card-view-in-slide-right 330ms;
        z-index: 120;
    }

    .fox-card-view-trans-enter-to {}

    /* 进场动画 */
    @-webkit-keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }
    @keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }
</style>